<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar title="商家管理" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="merchant">
			<view class="merchant-seach">
				<view class="merchant-seach-wrap">
					<input @confirm="onConfirmSearchContent" v-model.trim="storeName" placeholder="搜索店铺" class="merchant-seach-wrap-input" />
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="moreList" scroll-y :scroll-with-animation='true' :style="{ 'height': appListHeight + 'px' }" class="merchant-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="moreList" scroll-y :scroll-with-animation='true' :style="{ 'height': h5ListHeight + 'px' }" class="merchant-list">
			<!-- #endif -->
				<view v-for="item of list" :key="item.id" class="merchant-list-item">
					<text class="merchant-list-item-name">商家名称：{{ item.storeName }}</text>
					<text class="merchant-list-item-line"></text>
					<view class="merchant-list-item-info">
						<text class="merchant-list-item-info-lxr">联系人：{{ item.contact }}</text>
						<text class="merchant-list-item-info-lxr merchant-list-item-info-lxdh">联系电话：{{ item.phone }}</text>
					</view>
					<view class="merchant-list-item-address">地址：{{ item.province }}{{ item.city }}{{ item.area }}{{ item.address }}</view>
					<view class="merchant-list-item-price">余额：¥{{ item.stock }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import { config } from '@/utils/config.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	data() {
		return {
			list: [],
			total: 0,
			totalPage: 0,
			page: 1,
			size: 10,
			h5ListHeight: 0,
			appListHeight: 0,
			storeName: '',
			flag: false
		};
	},
	components: {
		uniNavBar
	},
	onLoad() {
		const token = uni.getStorageSync('d_token')
		if (!token) {
			uni.showToast({
				icon: 'none',
				title: '尚未登录, 请先登录'
			})
			setTimeout(() => {
				uni.removeStorageSync('d_role')
				uni.removeStorageSync('d_memberId')
				uni.removeStorageSync('d_token')
				uni.removeStorageSync('d_openId')
				uni.reLaunch({
					url: '../verificationcodelogin/verificationcodelogin'
				})
			}, 777)
			return false
		}
		this.getStores();
	},
	onReady() {
		const that = this
		uni.getSystemInfo({
			success: ((res) => {
				let info = uni.createSelectorQuery().select('.merchant-seach');
				info.boundingClientRect(function(data) {
					that.h5ListHeight = res.windowHeight - data.height - 6 // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
					that.appListHeight = res.windowHeight - res.statusBarHeight  - 6 - 44 - data.height
				}).exec()
			})
		})
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.list = []
		this.total = 0
		this.totalPage = 0
		this.page = 1
		this.size = 10
		if (this.flag) {
			const page = this.page
			const size = this.size
			uni.request({
				url: `${config.api_base_url}agent/agent/storesBySearch/${page}/${size}`,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				data: {
					storeName: this.storeName
				},
				method: 'POST',
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total = data.total
						this.totalPage = this.pageTotal(this.total, this.size)
						this.list = this.list.concat(data.rows)
					} else {
						this.total = 0
						this.totalPage = 0
						this.list = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '搜索失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			})
		} else {
			this.getStores()
		}
	},
	methods: {
		onConfirmSearchContent() {
			
			const storeName = this.storeName
			this.list = []
			this.total = 0
			this.totalPage = 0
			this.page = 1
			this.size = 10
			
			
			if (storeName) {
				this.flag = true // flag为true代表是有搜索内容的
			} else {
				this.flag = false // flag为true代表是没有搜索内容的
			}
			

			if (this.flag) {
				const page = this.page
				const size = this.size
				uni.request({
					url: `${config.api_base_url}agent/agent/storesBySearch/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
					},
					data: {
						storeName: storeName
					},
					method: 'POST',
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.total = data.total
							this.totalPage = this.pageTotal(this.total, this.size)
							this.list = this.list.concat(data.rows)
						} else {
							this.total = 0
							this.totalPage = 0
							this.list = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '搜索失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			} else {
				this.getStores()
			}
		},
		pageTotal(rowCount, pageSize) {
			if (rowCount === null || rowCount === "") {
				return 0;
			} else {
				if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
					return parseInt(rowCount / pageSize)
				}
				if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
					return parseInt(rowCount / pageSize) + 1
				}
			}
		},
		moreList() {
			const page1 = this.page + 1;
			const totalPage = this.totalPage
			if (page1 <= totalPage) {
				this.page = page1
				if (this.flag) {
					const page = this.page
					const size = this.size
					uni.request({
						url: `${config.api_base_url}agent/agent/storesBySearch/${page}/${size}`,
						header: {
							AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
						},
						data: {
							storeName: this.storeName
						},
						method: 'POST',
						success: ((res) => {
							let { status, data } = res.data
							if (status.flag === true) {
								this.total = data.total
								this.totalPage = this.pageTotal(this.total, this.size)
								this.list = this.list.concat(data.rows)
							} else {
								this.total = 0
								this.totalPage = 0
								this.list = []
							}
						}),
						fail: (() => {
							uni.showToast({
								icon: 'none',
								title: '搜索失败, 网络异常'
							})
						}),
						complete: (() => {
							uni.stopPullDownRefresh()
						})
					})
				} else {
					this.getStores()
				}
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		getStores() {
			const page = this.page
			const size = this.size
			uni.request({
				url: `${config.api_base_url}agent/agent/stores/${page}/${size}`,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total = data.total
						this.totalPage = this.pageTotal(this.total, this.size)
						this.list = this.list.concat(data.rows)
					} else {
						this.total = 0
						this.totalPage = 0
						this.list = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '查询失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			});
		}
	}
};
</script>
<style>
	page {
		background-color: #F7F4F8;
	}
</style>
<style scoped>
.merchant {
	width: 100%;
	box-sizing: border-box;
	padding-top: 12rpx;
	padding-right: 16rpx;
	padding-left: 14rpx;
	background-color: #F7F4F8;
}
.merchant-seach {
	width: 100%;
	height: 70rpx;
	box-sizing: border-box;
	padding-left: 4rpx;
	padding-right: 2rpx;
}
.merchant-seach-wrap {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 35rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
}
.merchant-seach-wrap-input {
	width: 100%;
	box-sizing: border-box;
	padding-left: 38rpx;
	font-size: 28rpx;
	height: 100%;
}
.merchant-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-top: 12rpx;
	padding-bottom: 12rpx;
}
.merchant-list-item {
	width: 100%;
	background-color: #fff;
	border-radius: 12rpx;
	box-sizing: border-box;
	padding-top: 24rpx;
	padding-right: 28rpx;
	padding-bottom: 40rpx;
	padding-left: 36rpx;
	display: flex;
	flex-direction: column;
	margin-bottom: 12rpx;
}
.merchant-list-item:last-child {
	margin-bottom: 0;
}
.merchant-list-item-name {
	font-size: 28rpx;
	font-family: PingFangSC-Medium,PingFang SC;
	font-weight: 500;
	color: rgb(51, 51, 51);
	line-height: 40rpx;
}
.merchant-list-item-line {
	width: 100%;
	margin-top: 12rpx;
	height: 2rpx;
	background-color: #eee;
	margin-bottom: 10rpx;
}
.merchant-list-item-info {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}
.merchant-list-item-info-lxr {
	font-size: 28rpx;
	font-family: PingFangSC-Regular,PingFang SC;
	font-weight: 400;
	color: rgb(51, 51, 51);
	line-height: 40rpx;
}
.merchant-list-item-info-lxdh {
	margin-left: 70rpx;
}
.merchant-list-item-address {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Regular,PingFang SC;
	font-weight: 400;
	color: rgb(51, 51, 51);
	line-height: 40rpx;
}
.merchant-list-item-price {
	width: 100%;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Regular,PingFang SC;
	font-weight: 400;
	color: #F02230;
	line-height: 40rpx;
}
</style>